<template>
  <div class="goods">
    <x-header style="background-color:#000;" :left-options="{showBack: false}">
      商品列表
      <!-- <router-link to="/cart" slot="right">
        <i class="fa fa-shopping-cart"></i>
        <badge text="1"></badge>
      </router-link> -->
      <router-link to="/cart" slot="right">
        <i class="fa fa-shopping-cart"></i>
        <badge v-if="countcart" v-bind:text="countcart"></badge>
      </router-link>
    </x-header>
      <ul class="lists">
        <template v-for="item in goodsData">
          <!-- <p>{{item.pname}}</p> -->
          <router-link :to="{path:'/details/'+item.pid+''}" tag="li" class="list">
            <img :src="item.pimg" :alt="item.pname">
            <p>{{item.pname}}</p>
            <p>
              <span class="text-orange">RMB:{{item.pnprice}}</span> 
              <span class="text-deep-grey">
                <del>RMB:{{item.poprice}}</del>
              </span>
            </p>
          </router-link>
        </template>
      </ul>

      <ul class="pageing" v-if="goodsData.length!=0">
        <li @click="firstPage()">首页</li>
        <!-- <li @click="previousPage()"><</li> -->
        <!-- <li>...</li> -->
        <li @click="previousPage()" v-if="pages!=1"><</li>
        <li v-if="pages==1" class="disabled"><</li>
        <li v-for="index in indexs"  v-bind:class="{ 'selectLi': pages == index}">
          <a v-on:click="goto(index)">{{ index }}</a>
        </li>
        <!-- <li>...</li> -->
        <!-- <li @click="nextPage()">></li> -->
        <li @click="nextPage()" v-if="pages!=totalPage">></li>
        <li @click="nextPage()" v-if="pages==totalPage" class="disabled">></li>
        <li>共{{totalPage}}页</li>
      </ul>

      <tabbar class="tb-menus">
        <tabbar-item>
          <i class="fa fa-home" slot="icon"></i>
          <span slot="label">商品列表</span>
        </tabbar-item>
        <tabbar-item>
          <i class="fa fa-user" slot="icon"></i>
          <span slot="label">个人中心</span>
        </tabbar-item>
      </tabbar>
  </div>
</template>
<script>
import {XHeader,Badge,Tabbar,TabbarItem } from 'vux'
import goodsApi from '../api/goods.js'
import userApi from '../api/user.js'
export default {
  components:{
    XHeader,Badge ,Tabbar,TabbarItem
  },
  created(){
    this.getPage()

    goodsApi.getGoodsCount((res)=>{
      this.count=res.data;
    },(err)=>{},{})

  },
  methods:{
     btnClick: function(data){//页码点击事件
      if(data != this.pages){
          this.pages = data 
      }
    },
    //取某页数据
    getPage(){
      goodsApi.getGoodsPage((res)=>{
        this.goodsData=res.data;
        // this.aaa = res.data.data[0]
      },(err)=>{

      },{},this.pages);
    },
    //上一页
    previousPage(){
      if (this.pages===1) {
        this.pages=1;
      }
      else{
        this.pages--;
      }
      this.getPage()
    },
    //下一页
    nextPage(){
      let total = Math.ceil(this.count/6);
      if (this.pages>total) {
        this.pages=total;
      }
      else{
        this.pages++;
      }
      this.getPage()
    },
    //跳到首页
    firstPage(){
      this.pages=1;
      this.getPage()
    },
    //跳到尾页
    lastPage(){
      this.pages=this.totalPage;
      this.getPage()
    },
    //
    goto(index){
      this.pages=index;
      this.getPage()
    }
  },
  data(){
    return {
      goodsData:[], //展示的数据
      pages:1, //当前页码
      count:0, //所有数据数目
      // totalPage:thi //页数
    }
  },
  computed:{
    countcart() {
      return this.$store.state.details.count
    },
    totalPage(){
      return Math.ceil(this.count/6) ;
    },
    indexs:function(){
      var left=1;
      var right=this.totalPage;
      var ar=[];
      if(this.totalPage>= 5){
        if(this.pages > 3 && this.pages < this.totalPage-2){
                left = this.pages - 2
                right = this.pages + 2
        }else{
            if(this.pages<=3){
                left = 1
                right = 5
            }else{
                right = this.totalPage
                left = this.totalPage -4
            }
        }
      }
      while (left <= right){
        ar.push(left)
        left ++
      }
      return ar
    }
  }
}
</script>
<style lang="less" scoped>
@tabbar-text-active-color: #ff696b;
  .goods{
    i{
      font-size: 20px;
      margin-right: 15px;
    }
    .vux-badge{
      position: absolute;
      top: -5px;
      right: 0;
    }
    .lists{
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      .list{
        width: 49vw;
        margin-bottom: 2vw;
        img{
          width: 50vw;
          height: 40vw;
        }
        p{
          margin-left: 2vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .list:nth-of-type(odd){

        margin-right: 2vw;
      }
    }
    .pageing{
      display: flex;
      justify-content: center;
      margin-top:5vw;
      margin-bottom: 22vw;
      li{
        float: left;
        border: 1px solid #e6e6e6;
        color: #666;
        padding: 1px 10px;
      }
      // li:active{
      //   background-color: #f60;
      //   color: #fff;
      // }
      .selectLi{
        background-color: #f60;
        color: #fff;
      }
      .disabled{
        background-color: #666;
        color: #fff;
      }
    }
  }
</style>
<style lang="less">
  @tabbar-text-active-color: #f60;
  .tb-menus .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,.tb-menus .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,.tb-menus .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
    color:#f60;
  }
</style>